<template>
  <!-- -->
  <div class="selection:bg-blue-400 selection:text-white selection:rounded-md">
    <!-- <code>{{ $store.state.initData?.goodsCategory || "" }}</code> -->
    <span id="0"> </span>
    <CustomHeader></CustomHeader>
    <div class="">
      <nuxt class="min-h-[55vh]" />
    </div>
    <div class="bg-[#F9F9FA] border-t" v-if="$store.state.footers">
      <CustomBottom></CustomBottom>
    </div>
    <!-- Loading -->
    <!-- <GlobalLoader /> -->
    <!-- 回到顶部 -->
    <CustomerService :showBackToTop="showBackToTop"></CustomerService>
  </div>
</template>
<script>
  export default {
    components: {},
    // key(route) {
    //   return route.fullPath
    // },
    data() {
      return {
        showBackToTop: false, // 控制返回顶部按钮的显示状态
        showLoading: true // 控制全局加载状态
      }
    },
    created() {
      this.initLayout()
    },
    beforeDestroy() {
      if (process.client) {
        window.removeEventListener('scroll', this.handleScroll)
      }
    },
    methods: {
      initLayout() {
        if (!process.client) return
        this.initializeData()
        window.addEventListener('scroll', this.handleScroll)
      },
      // 处理滚动事件
      handleScroll() {
        this.showBackToTop = window.scrollY > 300
      },
      // 处理文档加载状态
      // 初始化所有需要的数据
      async initializeData() {
        const initActions = [
          ['user/getUserInfo', '获取用户数据'],
          ['initData/getCategoryData', '获取分类数据'],
          ['initData/getFooterData', '获取页脚数据'],
          ['initData/getInitData', '初始化基础数据'],
          ['initData/getInitData2', '获取多语言数据']
        ]
        try {
          await Promise.all(initActions.map(([action]) => this.$store.dispatch(action)))
          this.$nuxt.$loading.finish()
        } catch (error) {
          console.error('数据初始化失败:', error)
        }
      }
    }
  }
</script>
<style lang="less">
  input[type='search'] {
    -webkit-appearance: none;
  }
  [type='search']::-webkit-search-decoration {
    display: none;
  }
  input::-webkit-search-cancel-button {
    display: none;
  }
</style>
